<template>
  <a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">Add</a-button>
  <a-table bordered :data-source="dataSource" :columns="columns">
    <template #name="{ text, record }">
      <div class="editable-cell">
        <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
          <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
          <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
        </div>
        <div v-else class="editable-cell-text-wrapper">
          {{ text || ' ' }}
          <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
        </div>
      </div>
    </template>
    <template #operation="{ record }">
      <a-popconfirm
        v-if="dataSource.length"
        title="Sure to delete?"
        @confirm="onDelete(record.key)"
      >
        <a>Delete</a>
      </a-popconfirm>
    </template>
  </a-table>
</template>
<script lang="ts">
// 搜索记录

import { cloneDeep } from 'lodash-es'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import type { UnwrapRef } from 'vue'
import axios from 'axios'
const columns = [
  {
    title: '搜索词',
    dataIndex: 'name',
    width: '25%'
  },
  {
    title: '搜索量',
    dataIndex: 'age',
    width: '15%'
  },
  {
    title: '搜索时间',
    dataIndex: 'address',
    width: '40%'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]
interface DataItem {
  key: string
  name: string
  age: number
  address: string
}
const data: DataItem[] = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  })
}

export default defineComponent({
  setup() {
    const value = ref<string>('')

    const dataSource = ref(data)
    const editableData: UnwrapRef<Record<string, DataItem>> = reactive({})

    const edit = (key: string) => {
      console.log(key)
      editableData[key] = cloneDeep(
        dataSource.value.filter((item) => key === item.key)[0]
      )
    }
    const save = (key: string) => {
      Object.assign(
        dataSource.value.filter((item) => key === item.key)[0],
        editableData[key]
      )
      delete editableData[key]
    }
    const cancel = (key: string) => {
      delete editableData[key]
    }
    const getData = async () => {
      const resp = await axios.get('/api/get_search')
      console.log(resp.data, '555')
    }
    const qxClick = (a: any, b: any) => {
      console.log(a, b, '5555')
    }
    onMounted(() => {
      getData()
    })
    return {
      dataSource,
      columns,
      editingKey: '',
      editableData,
      edit,
      save,
      cancel,
      value,
      checked: ref(false),
      qxClick
    }
  }
})
</script>
<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eff2f5;
  .header {
    width: 100%;
    height: 150px;
    display: flex;

    background: #fff;
    .hleft {
      width: 70%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      div {
        width: 250px;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        align-items: center;
      }
      .hright {
        width: 30%;
        height: 100%;
      }
    }
  }
  .main {
    flex: 1;
    overflow: auto;
    margin-top: 20px;
    background: #fff;
  }
}
</style>
